<script setup lang="ts">
  import Editor from '@/components/business/editor/Editor.vue'
  import { ElEmpty } from 'element-plus'
  import { useGetManualInfo } from '@/services/pages/know/useManual'
  import { computed, nextTick, ref, watch } from 'vue'
  import defaultImg from '@/assets/image/avatar_upload_default.png'

  const { manualInfo, getInfoLoading, getInfo } = useGetManualInfo()

  defineOptions({
    name: 'ManualPreviewModal',
  })

  const props = defineProps({
    manualId: {
      type: String,
      required: true,
    },
  })

  // 弹窗显示状态
  const visible = defineModel('visible', { type: Boolean, default: false })

  // 编辑器组件实例
  const editorInstance = ref<InstanceType<typeof Editor> | null>(null)

  // 可见类型渲染文本
  const visibleTypeRenderTxt = computed(() => {
    if (manualInfo.value.visibilityType === 1) {
      return '全部可见'
    }
    if (manualInfo.value.visibilityType === 2) {
      return '部门可见'
    }
    return '公司可见'
  })

  /**
   * 挂载编辑器
   */
  const mountEditor = () => {
    nextTick(() => {
      if (editorInstance.value) {
        editorInstance.value.mountEditor()
      }
    })
  }

  watch(
    visible,
    async (value) => {
      if (value) {
        await getInfo(props.manualId)
        mountEditor()
      }
    },
    { immediate: true },
  )
</script>

<template>
  <h-drawer v-model="visible" title="说明书预览" :width="800" unit="px" :loading="getInfoLoading">
    <div class="preview_container">
      <div class="title">
        <div class="info_item">
          <div class="label">说明书名称:</div>
          <div class="value">{{ manualInfo.name }}</div>
        </div>
        <div class="info_item">
          <div class="label">可见类型:</div>
          <div class="value">{{ visibleTypeRenderTxt }}</div>
        </div>
        <div class="info_item">
          <div class="label">更新时间:</div>
          <div class="value">{{ manualInfo.updateTime }}</div>
        </div>
      </div>
      <div class="img_container info_item">
        <div class="label">说明书封面:</div>
        <div class="value">
          <h-image
            :width="150"
            :height="150"
            :src="manualInfo.image || defaultImg"
            :show-del-btn="false"
            :is-show-img-preview="!!manualInfo.image"
          />
        </div>
      </div>
      <div class="content info_item">
        <div class="label">说明书内容:</div>
        <Editor
          v-if="manualInfo.content"
          ref="editorInstance"
          :readonly="true"
          :value="manualInfo.content"
          :style="{ height: 'calc(100% - 16px - 12px)' }"
        ></Editor>
        <el-empty v-else description="暂无内容..." style="width: 100%" />
      </div>
    </div>

    <template #footer>
      <h-button is-modal @click="visible = false">关闭</h-button>
    </template>
  </h-drawer>
</template>

<style scoped lang="scss">
  .preview_container {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    height: 100%;

    .title {
      display: flex;
      column-gap: 32px;
      flex-wrap: wrap;

      .info_item {
        display: flex;
        column-gap: 5px;
      }
    }

    .label {
      color: #606266;
    }

    .content {
      height: calc(100% - 16px - 24px - 166px);
      display: flex;
      flex-direction: column;
      row-gap: 8px;
    }
  }
</style>
